<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 第一题：
      // var fullName = 'language'
      // var obj = {
      // fullName: 'javascript',
      // prop: {
      //   getFullName: function () {
      //     console.log(this);
      //     return this.fullName
      //   }
      // }
      // }
      // // this：没有箭头函数,看调用
      // console.log(obj.prop.getFullName()) // undefined
      //     // this指向了prop，getFullName调用了，prop中没有fullName，输出为undefined

      // var test = obj.prop.getFullName
      // console.log(test())
      //     // this指向了全局window，输出为全局变量fullName




      //No.2
      // var val = 1
      // var json = {
      //   val: 10,
      //   dbl: function () {
      //     val *= 2
      //     console.log(val);
      //   }
      // }
        
      // json.dbl() // 2
      //     // json对象找到json.dbl来调用，var预解析，val为1，函数找到全局val为1，在进行相乘，函数内私有val的值为2

      // console.log(json.val + val) // 11
      //     //json.val找到对象中的val为10，val为全局变量val的值，相加为11



      // No.3
      // var val = 1
      // var json = {
      //   val: 10,
      //   dbl: function () {
      //     this.val *= 2    // 20
      //   }
      // }
      //     //  this：没有箭头函数，看调用，this指向了json，json.dbl()调用，调用了json对象中val，再相乘后val为20，函数内的私有val的值为20,val计算后的值又把对象val值覆盖了
      // json.dbl()
      //     // console.log(json);// 自己写的因为this.val为20，又把json对象中val覆盖为20
      // console.log(json.val + val) // 21
      //     // 因为this.val的值为20，又把对象json.val的值覆盖，json.val的值为20，val为全局变量val的值，相加为21

      // No.4
      // var num = 10
      // var obj = {num: 20}
      // obj.fn = (function (num) {
      //   this.num = num * 3
      //   num++
      //   return function (n) {
      //     this.num += n
      //     num++
      //     console.log(num)
      //   }
      // })(obj.num)
      // var fn = obj.fn
      // fn(5)
      // obj.fn(10)
      // console.log(num, obj.num)

      // No.5
      var name = "window";
      var person1 = {
        name: "person1",
        show1: function () {
          console.log(this.name);
        },
        show2: () => console.log(this.name),
        show3: function () {
          return function () {
            console.log(this.name);
          };
        },
        show4: function () {
          return () => console.log(this.name);
        },
      };

      var person2 = {
        name: "person2",
      };

      person1.show1();//没箭头函数 this指向了person1，person1.show1()调用，this.name =>person1.name
      person1.show1.call(person2);// 输出为person2.name // this指向了person1，call改变了this指向，改this指向为person2，this.name => person2.name
      person1.show2();// 输出为window// 箭头函数 函数定义所在的作用域，
            // 即this所在的函数的函数的定义的作用域，理解为this的父级作用域，this没父级作用域
            // this指向了window，this.name => window.name
      person1.show2.call(person2);// 箭头函数，没有this指向，call无法修改，this还是window this.name => window.name

      person1.show3()();// 无箭头函数；person1.show3()开始调用，this是person1，返回个全局函数person1，全局函数调用，this再指向为window，thisname => window.name
      person1.show3().call(person2);// 无箭头函数；person1.show3()开始调用，this是person1,call改变this指向为person2，this.name => person2.name
      person1.show3.call(person2)();// 

      // person1.show4()();
      // person1.show4().call(person2);
      // person1.show4.call(person2)();
    </script>
  </body>
</html>
